<template>
    <div id='index'>
        <transition :name='routerAnim' :mode="routerMode">
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive" class='router'></router-view>
            </keep-alive>
        </transition>
        <transition :name='routerAnim' :mode="routerMode">
            <router-view v-if="!$route.meta.keepAlive" class='router'></router-view>
        </transition>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import radio from '../components/Radio.vue'
    import checkBox from '../components/CheckBox.vue'
    import { getOS } from '../utils/utils'
    import  { mapGetters, mapActions }  from 'vuex'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setMsgTipStyle',
                'setSessionId',
                'localInfo'
            ]),
            currentRouter(item){
                let routerArr = this.$route.matched
                let matchRouter = _.some(routerArr,['name',item.router])
                return matchRouter
            },
            goRouter(item,isSub){
                let thisRouter
                let routers = item.subRouters

                if(isSub === 'sub'){
                    if(this.$route.name == item) return
                    this.$router.push(item)
                    return
                }

                if(routers.length > 1){
                    item.opened = !item.opened
                    return
                }

                thisRouter = routers[0]
                if(this.$route.name == thisRouter.name) return
                this.$router.push(thisRouter)
            },
            goLogin(){
                this.setSessionId('')
                this.$router.push({
                    name:'login'
                })
            }
        },
        data() {
            return {
                isWeb:process.env.NODE_ENV == 'web',
                os:getOS(),
                placeholder:'--',
                showModal:false,
                selectBox:'大雨',
                radioBox:'123',
                checkBox:true,
                sideBarList:[[{
                    text:'用户',
                    router:'user',
                    opened:false,
                    subRouters:[{
                        name:'user-index'
                    }],
                    iconClass:'icon-user'
                },{
                    text:'订单',
                    router:'order',
                    opened:false,
                    subRouters:[{
                        name:'order-index'
                    }],
                    iconClass:'icon-evaluate'
                },{
                    text:'交易分析',
                    router:'transaction',
                    opened:false,
                    subRouters:[{
                        name:'transaction-analysis'
                    }],
                    iconClass:'icon-statistics'
                },{
                    text:'贷款导流',
                    router:'loan',
                    opened:true,
                    subRouters:[{
                        name:'loan-index',
                    }],
                    iconClass:'icon-finance'
                }]]
            }
        },
        computed:{
            ...mapGetters([
                'loading',
                'msgTip',
                'localInfo',
            ]),
            admin(){
                return this.localInfo.admin
            },
            sessionId(){
                return this.localInfo.sessionId
            },
            needLogin(){
                return this.localInfo.needLogin
            },
            routerAnimation(){
                return this.localInfo.routerAnimation
            },
            routerAnim(){
                if(this.os == 'Android'){
                    return ''
                }
                if(this.os != 'Android'){
                    return this.routerAnimation
                }
            },
            routerMode(){
                if(this.os == 'Android'){
                    return 'out-in'
                }
                if(this.os != 'Android'){
                    return ''
                }
            }
        },
        created(){
            // this.setMsgTipStyle({ top:'100px' })
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    .index-view{

        .wrapper{
            width: 100%;
            height:100%;
            padding-bottom:10px;
            box-sizing:border-box;
        }
        .index-header{
            display:flex;
            justify-content:space-between;
            align-items:center;
            background-color: $blue;
            color:#fff;
        }
        .index-header__company{
            display:flex;
            align-items:center;
            .logo{
                margin:16px 18px 16px 40px;
                width: 48px;
                height:48px;
            }
            .text{
                p{
                    margin:16px 18px 16px 40px;
                    font-size: 20px;
                    line-height:48px;
                }
                span{
                    font-size: 13px;
                    color:$dark;
                }
            }
        }
        .index-header__user{
            display:flex;
            align-items:center;
            padding-right: 36px;
            .iconfont{
                display: block;
                font-size: 15px;
                width: 15px;
                height:15px;
                padding:2px;
                border:1px solid #fff;
                border-radius:50%;
            }
            .name{
                padding-left:10px;
                padding-right: 20px;
                i{
                    color:$green;
                }
            }
            .logout{
                padding-left: 20px;
                position: relative;
                color:$green;
                cursor:pointer;
                &:before{
                    content:'';
                    position: absolute;
                    left:0;
                    top:50%;
                    height:100%;
                    transform:translate(0,-50%);
                }
            }
        }
        .index-main{
            display:flex;
            position: absolute;
            top:80px;
            bottom:0;
            left:0;
            right:0;
        }
        .content{
            flex:1;
            position: relative;
            z-index:2;
        }
        .side-bar{
            width: 100%;
            position: absolute;
            bottom:0;
            right:0;
            left:0;
            overflow:auto;
            background-color: #FAFAFA;
            text-align:center;
            border-right:1px solid $sectionColor;
            padding:0;
            box-sizing:border-box;
        }
        .side-bar__box{
            padding:20px 0;
            border-bottom:1px solid $sectionColor;
            &:last-child{
                border-bottom:none;
            }
        }
        .index-footer{
            position: absolute;
            bottom:0;
            background-color: #FFF;
            padding: 10px;
            a{
                color:$importColor;
            }
        }
    }
</style>
